<template>
  <view :style="colorStyle">
    <tabs :list="tablist" @tablistChange="tablistChange" />

    <view class="infobox1" v-if="tablistindex == 0">
      <view class="title c1F1F1F f32 fontWeight"> 物流信息 </view>
      <view class="block1">
        <view class="info1 c1F1F1F f24"> 快递公司 </view>
        <view class="info2 flex aitems between" style="position: relative">
          <picker
            mode="selector"
            :range="dictbizlist"
            range-key="dictValue"
            class="avatar-wrapper"
            @change="pickerChange"
          >
            <view class="avatar-wrapper"></view>
          </picker>
          <view class="tip1 c858585 f28" v-if="dictbizlistindex == null">
            请选择快递公司
          </view>
          <view class="tip1 c1F1F1F f28" v-if="dictbizlistindex !== null">
            {{ dictbizlist[dictbizlistindex].dictValue }}
          </view>
          <image src="@/static/img18.png" mode=""></image>
        </view>
      </view>
      <view class="block1" style="border: none">
        <view class="info1 c1F1F1F f24"> 快递单号 </view>
        <view class="info2 flex aitems between">
          <input
            type="text"
            placeholder="请输入快递单号"
            v-model="logisticsNo"
            class="c1F1F1F f28"
            placeholder-class="c858585 f28"
          />
        </view>
      </view>
    </view>

    <view
      class="infobox2 c1F1F1F f32 fontWeight tcenter"
      v-if="tablistindex == 1"
    >
      <view class=""> 点击下方【确定退回】 </view>
      <view class=""> 则视为已将货物退回至店铺 </view>

      <view class="infobox5 f32 cfff" @click="save"> 确定退回 </view>
    </view>

    <view class="infobox5 f32 cfff" v-if="tablistindex == 0" @click="save">
      确定
    </view>

    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import {
  orderRefundInfo,
  dictbizlist,
  orderRefundShippingSave,
  orderRefundShippingUpdate,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { msg, loading, backtime } from "../../utils/wxAPI";
import { getToken, setStorage } from "../../utils/storage";
export default {
  mixins: [colors],
  data() {
    return {
      tablist: [
        {
          name: "物流寄回",
        },
        {
          name: "到店退货",
        },
      ],
      tablistindex: 0,
      options: {},
      info: {},
      dictbizlist: [],
      dictbizlistindex: null,
      logisticsNo: "",
    };
  },
  async onLoad(options) {
    this.options = options;
    // if (getToken()) {
    // 	this.orderInfo()
    // }
  },
  async onShow() {
    if (getToken()) {
      await this.handleDictbizlist();
      this.orderRefundInfo();
    }
  },
  methods: {
    async handleDictbizlist() {
      let { data } = await dictbizlist({
        code: "express",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.dictbizlist = data.data;
      }
    },

    async orderRefundInfo() {
      loading();
      let { data } = await orderRefundInfo({
        id: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.info = info;
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },

    tablistChange(e) {
      this.tablistindex = e;
    },

    pickerChange(e) {
      this.dictbizlistindex = e.detail.value;
    },

    async save() {
      if (this.tablistindex == 0) {
        if (this.dictbizlistindex == null) {
          return msg("请选择快递公司");
        }
        if (!this.logisticsNo.trim()) {
          return msg("请输入快递单号");
        }
      }
      loading();
      if (this.info.refundStatus == 2) {
        let { data } = await orderRefundShippingUpdate({
          id: this.options.id,
          logisticsName:
            this.tablistindex == 0
              ? this.dictbizlist[this.dictbizlistindex].dictValue
              : "",
          logisticsNo: this.tablistindex == 0 ? this.logisticsNo : "",
          logisticsType: this.tablistindex + 1,
        });
        if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
          msg(data.msg, true);
          setStorage("refundRef", 1);
          backtime();
        }
        uni.hideLoading();
        return;
      }
      let { data } = await orderRefundShippingSave({
        id: this.options.id,
        logisticsName:
          this.tablistindex == 0
            ? this.dictbizlist[this.dictbizlistindex].dictValue
            : "",
        logisticsNo: this.tablistindex == 0 ? this.logisticsNo : "",
        logisticsType: this.tablistindex + 1,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        msg(data.msg, true);
        setStorage("refundRef", 1);
        backtime();
      }
      uni.hideLoading();
    },
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  padding: 36rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .title {
    margin: 0 0 16rpx 0;
  }

  .block1 {
    border-bottom: 1px solid #f5f5f5;
    padding: 24rpx 0;

    .info1 {
    }

    .info2 {
      margin: 24rpx 0 0;

      .tip1 {
      }

      image {
        width: 32rpx;
        height: 32rpx;
      }

      input {
        width: 100%;
      }
    }
  }
}

.infobox2 {
  padding: 88rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;
}

.infobox5 {
  background: var(--view-theme);
  border-radius: 44rpx;
  margin: 84rpx 30rpx 0;
  padding: 24rpx 0;
  text-align: center;
}
</style>
